<template>
    <div style="padding-left:5px;">
<!--        <pre>{{formData}}</pre>-->
<!--        tableWidth：{{tableWidth}}-->
        <el-row>
            <el-col align="left">
                <el-form>
                    <el-form-item label="乘数1：">
                        <el-input-number v-model="formData.num1" :min="0" :max="999999" :step="1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="乘数2：">
                        <el-input-number v-model="formData.num2" :min="0" :max="999999" :step="1"></el-input-number>
                    </el-form-item>
                    <el-row>
                        <el-col align="center">
                            <el-button type="primary" @click="calc">计算</el-button>
                        </el-col>
                    </el-row>

                    <el-alert v-if="error"
                              title="计算错误，请联系管理员"
                              type="error"
                              effect="dark">
                    </el-alert>
                    <el-form-item label="结果：" v-if="!error">
                        <div style="font-size:36px;letter-spacing: 10px;">
                            {{formData.expectedResult}}
<!--                            <span>-->
<!--                                <i v-if="formData.match" class="el-icon-check"></i>-->
<!--                                <i v-else class="el-icon-close" style="color:red;"></i>-->
<!--                            </span>-->
                        </div>
                        <div :style="{'width': tableWidth}">
                            <table class="mul_table"  cellspacing="0">
                                <tr v-if="formData.num1Int != null" >
                                    <td v-for="(index) in formData.num1Padding" :key="'num1_padding_' + index" >

                                    </td>
                                    <td v-for="(char, index) in formData.num1Int + ''" :key="'num1_' + index" >
                                        {{char}}
<!--                                        <span v-show="formData.num1TailZeroLength <= 0 && index == (formData.num1Int + '').length - (formData.num1Scale + '').length" class="dot_point">.</span>-->
                                    </td>
                                    <td v-for="(index) in formData.num1TailZeroLength" :key="'num1_tail0_' + index" >
                                        0
                                    </td>
                                </tr>
                                <tr v-if="formData.num2Int != null" >
                                    <td v-for="(index) in formData.num2Padding" :key="'num2_padding_' + index" :class="{'border_bottom': index > 1 && formData.steps.length > 1}">
                                        <span v-if="index == 1">✖</span>
                                        <span v-else style="visibility: hidden;">✖</span>
                                    </td>
                                    <td v-for="(char, index) in formData.num2Int + ''" :key="'num2_' + index" :class="{'border_bottom': formData.steps.length > 1}">
                                        {{char}}
<!--                                        <span v-show="formData.num2TailZeroLength <= 0 && index == (formData.num2Int + '').length - (formData.num2Scale + '').length" class="dot_point">.</span>-->
                                    </td>
                                    <td v-for="(index) in formData.num2TailZeroLength" :key="'num2_tail0_' + index" >
                                        0
                                    </td>
                                </tr>
                                <template v-if="formData.steps.length > 1">
                                    <template v-for="(step, stepIndex) in formData.steps" >
                                        <tr :key="'tr1_' + stepIndex">
                                            <td v-for="i in step.padding" :key="i">
                                                <span v-if="stepIndex > 0 && i == 1" style="font-size: 30px;">
                                                    +
                                                </span>
                                            </td>
                                            <td v-for="(char, index) in step.result + ''" :key="'result1_' + index">
                                                {{char}}
                                            </td>
                                        </tr>
                                    </template>
                                </template>
                                <tr>
                                    <td v-for="(index) in formData.finaResultPadding" :key="'finalResult_padding_' + index" :class="{'border_top': index > 1}">
                                        <span style="visibility: hidden;">=</span>
                                    </td>
                                    <td v-for="(char, index) in formData.finalResult + ''" :key="'final_result_' + index" class="border_top">
                                        {{char}}
<!--                                        <span v-show="index == (formData.finalResult + '').length  + formData.num1TailZeroLength + formData.num2TailZeroLength - (formData.num1Scale * formData.num2Scale + '').length" class="dot_point">.</span>-->
                                    </td>
                                    <td v-for="(index) in (formData.num1TailZeroLength + formData.num2TailZeroLength)" :key="'finalResult_tail_' + index" class="border_top">
                                        0
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <div style="padding-left:10px;">

        </div>
    </div>

</template>

<script>
    /* eslint-disable */
    import axios from "axios";

    export default {
        name: 'divide1',
        data() {
            return {
                error: false,
                formData: {
                    num1: 12,
                    num1Int: null,
                    num1Padding: 0,
                    num1TailZeroLength: 0,
                    num1Scale: 0,
                    num2: 13,
                    num2Int: null,
                    num2Padding: 0,
                    num2TailZeroLength: 0,
                    num2Scale: 0,
                    steps: [],
                    finalResult: 0,
                    finaResultPadding: 0,
                },
                tableWidth: "100%",
            }
        },
        methods: {
            async calc() {
                let postData = {
                    num1: this.formData.num1,
                    num2: this.formData.num2,
                }
                try {
                    let response = await axios.post('/mul', postData)
                    // console.log('response:', response)
                    this.formData.num1Int = response.data.num1
                    this.formData.num1Padding= response.data.num1_padding
                    this.formData.num1TailZeroLength= response.data.num1_tail_zero_length
                    this.formData.num1Scale= response.data.num1_scale

                    this.formData.num2Int = response.data.num2
                    this.formData.num2Padding= response.data.num2_padding
                    this.formData.num2TailZeroLength= response.data.num2_tail_zero_length
                    this.formData.num2Scale= response.data.num2_scale

                    this.formData.steps = response.data.steps
                    this.formData.finalResult = response.data.final_result
                    this.formData.finaResultPadding = response.data.final_result_padding
                    this.formData.expectedResult = response.data.expected_result
                    let maxLength = this.formData.finaResultPadding + (this.formData.finalResult + "").length + this.formData.num1TailZeroLength + this.formData.num2TailZeroLength
                    // console.log('maxLength:', maxLength)
                    if (maxLength) {
                        this.tableWidth = (50 * maxLength) + 'px'
                    }
                    this.error = false
                } catch (e) {
                    this.error = true
                }

                this.$localStorage.set('mul1.formData', this.formData, 4 * 60 * 60 * 1000) // keep 1 day
            },
        },
        computed: {},
        mounted() {
            let formData = this.$localStorage.get('mul1.formData')
            if (formData) {
                // this.formData = formData
                Object.assgin(this.formData, formData)
            }
            this.calc()
        }
    };
</script>
<style>
    .mul_table {

    }
    .mul_table td {
        font-size: 20px;
        padding:2px;
        width: 30px;
        /*overflow: hidden;*/
        display: inline-block;
        /*white-space: nowrap;*/
    }
    .border_left {
        border-left: 3px solid green;
    }
    .border_top {
        border-top: 3px solid green;
    }
    .border_bottom {
        border-bottom: 3px solid green;
    }
    .dot_point {
        position: relative;
        color:red;
        font-size:20px;
    }
</style>
